<template>
    <div class="rldc_wrap">
        <div class="page-content">
            <div class="top-panel">
                <div class="panel-item">
                    <div class="panel-title">运行情况</div>
                    <div class="panel-content">
                        <div class="row-item">
                            <span class="row-item-label">输出电压：</span>
                            <!--1-->
                            <span class="row-item-num">{{ valveState[16442] | formatFlowValue }}</span>
                            <span class="row-item-unit">V</span>
                        </div>
                        <div class="row-item">
                            <span class="row-item-label">输出电流：</span>
                            <!--2-->
                            <span class="row-item-num">{{ valveState[16443] | formatFlowValue }}</span>
                            <span class="row-item-unit">A</span>
                        </div>
                        <div class="row-item">
                            <span class="row-item-label">输出功率：</span>
                            <!--3-->
                            <span class="row-item-num">{{ valveState[16444] | formatFlowValue }}</span>
                            <span class="row-item-unit">kW</span>
                        </div>
                    </div>
                </div>

                <div class="panel-item">
                    <div class="panel-title">系统操作</div>
                    <div class="panel-content">
                        <div class="row-item">
                            <div class="row-item-label">系统启动</div>
                            <!--4-->
                            <el-button class="hy_btn is_primary" type="primary" :disabled="!!valveState[27]">启动</el-button>
                        </div>
                        <div class="row-item">
                            <div class="row-item-label">系统停机</div>
                            <!--5-->
                            <el-button class="hy_btn " type="danger" plain :disabled="!!valveState[28]">停机</el-button>
                        </div>
                        <div class="row-item">
                            <div class="row-item-label">状态：</div>
                            <!--6-->
                            <el-radio-group class="hy_radio_group" v-model="systemStatus">
                                <el-radio-button :label="0">手动</el-radio-button>
                                <el-radio-button :label="1">自动</el-radio-button>
                            </el-radio-group>
                        </div>
                    </div>
                </div>

                <div class="panel-item">
                    <div class="panel-title">氢气</div>
                    <div class="panel-content">
                        <div>
                            <!--7-->
                            <el-button class="hy_btn is_primary" type="primary" :disabled="!!valveState[1000]">打开</el-button>
                        </div>
                        <div>
                            <!--8-->
                            <el-button class="hy_btn " type="danger" plain :disabled="!!valveState[1001]">关闭</el-button>
                        </div>
                        <div>
                            <span class="item-text">流量设定</span>
                            <!--9-->
                            <el-input class="item-value" v-model="flowValue" placeholder=""></el-input>
                            <span class="item-text">L/min</span>
                        </div>
                    </div>
                </div>

                <div class="panel-item">
                    <div class="panel-title">氧气</div>
                    <div class="panel-content">
                        <div>
                            <!--10-->
                            <el-button class="hy_btn is_primary" type="primary" :disabled="!!valveState[1003]">打开</el-button>
                        </div>
                        <div>
                            <!--11-->
                            <el-button class="hy_btn " type="danger" plain :disabled="!!valveState[1000]">关闭</el-button>
                        </div>
                        <div>
                            <span class="item-text">流量设定</span>
                            <!--12-->
                            <el-input class="item-value" v-model="flowValue1" placeholder=""></el-input>
                            <span class="item-text">L/min</span>
                        </div>
                    </div>
                </div>

                <div class="panel-item">
                    <div class="panel-title">阴极风机</div>
                    <div class="panel-content">
                        <div class="box-item">
                            <div class="item-row">
                                <span class="item-row-label">系统启动</span>
                                <!--13-->
                                <el-button class="hy_btn is_primary" type="primary" :disabled="!!valveState[1002]">启动</el-button>
                            </div>
                            <div class="item-row">
                                <span class="item-row-label">系统停机</span>
                                <!--14-->
                                <el-button class="hy_btn " type="danger" plain :disabled="!!valveState[1002]">停机</el-button>
                            </div>
                        </div>
                        <div class="box-item">
                            <div class="item-row">
                                <span class="item-row-label">流量</span>
                                <!--15-->
                                <el-input class="item-value" v-model="flowNum" placeholder=""></el-input>
                                <span class="item-row-label">L/min</span>
                            </div>
                            <div class="item-row">
                                <span class="item-row-label">转速</span>
                                <!--16-->
                                <el-input class="item-value" v-model="speedNum" placeholder=""></el-input>
                                <span class="item-row-label">RPM</span>
                            </div>
                            <div class="item-row">
                                <span class="item-row-label">设定</span>
                                <!--17-->
                                <el-input class="item-value" v-model="settingNum" placeholder=""></el-input>
                                <span class="item-row-label">RPM</span>
                            </div>
                        </div>
                    </div>
                </div>

            </div>


            <div class="middle-panel">
                <div class="left-panel">
                    <div class="panel-row">

                        <div class="row-item">
                            <div class="panel-title">系统运行指标</div>
                            <div class="row-item-content">
                                <div class="item-card">
                                    <!--18-->
                                   <div class="item-card-num">{{ valveState[11161] | formatFlowValue }}<span class="item-card-unit">%</span></div>
                                   <div class="item-card-label">发电效率</div>
                                </div>
                                <div class="item-card">
                                    <!--19-->
                                   <div class="item-card-num">{{ valveState[11162] | formatFlowValue }}<span class="item-card-unit">%</span></div>
                                   <div class="item-card-label">燃料利用率</div>
                                </div>
                                <div class="item-card">
                                    <!--20-->
                                   <div class="item-card-num">{{ valveState[11163] | formatFlowValue }}<span class="item-card-unit">kWh</span></div>
                                   <div class="item-card-label">累计发电量</div>
                                </div>
                            </div>
                        </div>

                        <div class="row-item">
                            <div class="panel-title">电堆状态</div>
                            <div class="row-item-content">
                                <div class="item-card">
                                    <div class="item-card-label">电堆1：</div>
                                    <!--21-->
                                    <div class="item-card-num">{{ valveState[16442] | formatFlowValue }}<span class="item-card-unit">V</span></div>
                                </div>
                                <div class="item-card">
                                    <div class="item-card-label">电堆3：</div>
                                    <!--23-->
                                    <div class="item-card-num">{{ valveState[16444] | formatFlowValue }}<span class="item-card-unit">V</span></div>
                                </div>
                                <div class="item-card">
                                    <div class="item-card-label">电堆2：</div>
                                    <!--22-->
                                    <div class="item-card-num">{{ valveState[16443] | formatFlowValue }}<span class="item-card-unit">V</span></div>
                                </div>
                                <div class="item-card">
                                    <div class="item-card-label">温度：</div>
                                    <!--24-->
                                    <div class="item-card-num">{{ valveState[16445] | formatFlowValue }}<span class="item-card-unit">°C</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel-row">
                        <div class="stats-box">
                            <div class="stats-item">
                                <!--25-->
                                <div class="stats-item-num">{{ valveState[16442] | formatFlowValue }}<span>us</span></div>
                                <div class="stats-item-label">电导率</div>
                            </div>
                            <div class="stats-item">
                                <!--26-->
                                <div class="stats-item-num">{{ valveState[16443] | formatFlowValue }}<span>L/min</span></div>
                                <div class="stats-item-label">氢气流量</div>
                            </div>
                            <div class="stats-item">
                                <!--27-->
                                <div class="stats-item-num">{{ valveState[16444] | formatFlowValue }}<span>L/min</span></div>
                                <div class="stats-item-label">阴极空气流量</div>
                            </div>
                            <div class="stats-item">
                                <!--28-->
                                <div class="stats-item-num">{{ valveState[16445] | formatFlowValue }}<span>L/min</span></div>
                                <div class="stats-item-label">补燃空气流量</div>
                            </div>
                            <div class="stats-item">
                                <!--29-->
                                <div class="stats-item-num">{{ valveState[16442] | formatFlowValue }}<span>L/min</span></div>
                                <div class="stats-item-label">氮气流量</div>
                            </div>
                        </div>

                        <div class="flow-box">
                            <div>
                                <div class="flow-text">
                                    <!--30-->
                                    <div class="flow-text-num">{{ valveState[16443] | formatFlowValue }}<span>KPa</span></div>
                                    <div class="flow-text-label">氧气</div>
                                </div>
                                <div class="flow-text">
                                    <!--31-->
                                    <div class="flow-text-label">去离子水</div>
                                </div>
                                <div class="flow-text">
                                    <!--32-->
                                    <div class="flow-text-num">{{ valveState[16445] | formatFlowValue }}<span>KPa</span></div>
                                    <div class="flow-text-label">氮气</div>
                                </div>
                                <div class="flow-text">
                                    <!--33-->
                                    <div class="flow-text-num">{{ valveState[16442] | formatFlowValue }}<span>KPa</span></div>
                                    <div class="flow-text-label">阴极空气</div>
                                </div>
                                <div class="flow-text">
                                    <!--34-->
                                    <div class="flow-text-num">{{ valveState[16443] | formatFlowValue }}<span>KPa</span></div>
                                    <div class="flow-text-label">补燃空气</div>
                                </div>
                            </div>

                            <div>
                                <!--35-->
                                <div class="flow-value">碱液流量{{ valveState[16444] | formatFlowValue }}L/min</div>
                                <!--36-->
                                <div class="flow-value">碱液流量{{ valveState[16445] | formatFlowValue }}L/min</div>
                                <!--37-->
                                <div class="flow-value">碱液流量{{ valveState[16442] | formatFlowValue }}L/min</div>
                                <!--38-->
                                <div class="flow-value">碱液流量{{ valveState[16443] | formatFlowValue }}L/min</div>
                                <!--39-->
                                <div class="flow-value">碱液流量{{ valveState[16444] | formatFlowValue }}L/min</div>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="right-panel">
                    <div class="panel-row">
                        <div class="chart-box" ref="flowChart1"></div>
                    </div>
                    <div class="panel-row">
                        <div class="chart-box" ref="flowChart2"></div>
                    </div>
                </div>
            </div>


            <div class="bottom-panel">
                <div class="panel-title">告警故障信息</div>

                <div class="panel-content">
                    <div class="content-item">
                        <div class="item-head">
                            <span class="item-head-td">元件</span>
                            <span class="item-head-td">告警状态</span>
                        </div>
                        <div class="item-body">
                            <vue-scroll :ops="$root.scrollOpsY">
                                <!--42-->
                                <div class="item-body-tr" >
                                    <span class="item-head-td">氢气进口压力过高</span>
                                    <span class="item-head-td"><span :class="valveState[16445]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">补燃空气压力过低</span>
                                    <span class="item-head-td"><span :class="valveState[1]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">氢气进口压力过低</span>
                                    <span class="item-head-td"><span :class="valveState[2]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">电堆输出电流过高</span>
                                    <span class="item-head-td"><span :class="valveState[3]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">阴极空气进口压力过高</span>
                                    <span class="item-head-td"><span :class="valveState[4]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">电堆1电压过低</span>
                                    <span class="item-head-td"><span :class="valveState[5]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">电堆阴极出口压力过低</span>
                                    <span class="item-head-td"><span :class="valveState[6]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">电堆3电压过高</span>
                                    <span class="item-head-td"><span :class="valveState[7]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">燃烧罐出口压力过高</span>
                                    <span class="item-head-td"><span :class="valveState[1]?'is_red':''"></span></span>
                                </div>
                            </vue-scroll>
                        </div>

                    </div>
                    <div class="content-item">
                        <div class="item-head">
                            <span class="item-head-td">元件</span>
                            <span class="item-head-td">告警状态</span>
                        </div>
                        <div class="item-body">
                            <vue-scroll :ops="$root.scrollOpsY">
                                <!--42-->
                                <div class="item-body-tr" >
                                    <span class="item-head-td">补燃空气压力过高</span>
                                    <span class="item-head-td"><span :class="valveState[2]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">氢气进口压力过低</span>
                                    <span class="item-head-td"><span :class="valveState[3]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">去离子水电导率过低</span>
                                    <span class="item-head-td"><span :class="valveState[4]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">电堆阴极入口压力过低</span>
                                    <span class="item-head-td"><span :class="valveState[5]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">电堆1电压过高</span>
                                    <span class="item-head-td"><span :class="valveState[6]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">电堆阴极出口压力过高</span>
                                    <span class="item-head-td"><span :class="valveState[7]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">电堆2电压过低</span>
                                    <span class="item-head-td"><span :class="valveState[1]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">电堆阳极出口压力过低</span>
                                    <span class="item-head-td"><span :class="valveState[2]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">电堆阳极出口压力过低</span>
                                    <span class="item-head-td"><span :class="valveState[3]?'is_red':''"></span></span>
                                </div>
                            </vue-scroll>
                        </div>
                    </div>
                    <div class="content-item">
                        <div class="item-head">
                            <span class="item-head-td">元件</span>
                            <span class="item-head-td">告警状态</span>
                        </div>
                        <div class="item-body">
                            <vue-scroll :ops="$root.scrollOpsY">
                                <!--42-->
                                <div class="item-body-tr" >
                                    <span class="item-head-td">氢气进口压力过低</span>
                                    <span class="item-head-td"><span :class="valveState[4]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">去离子水电导率过高</span>
                                    <span class="item-head-td"><span :class="valveState[5]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">电堆阴极人口压力过高</span>
                                    <span class="item-head-td"><span :class="valveState[6]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">电堆输出电流过低</span>
                                    <span class="item-head-td"><span :class="valveState[7]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">阴极空气进口压力过低</span>
                                    <span class="item-head-td"><span :class="valveState[1]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">电堆2电压过高</span>
                                    <span class="item-head-td"><span :class="valveState[2]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">电堆阳极出口压力过高</span>
                                    <span class="item-head-td"><span :class="valveState[3]?'is_red':''"></span></span>
                                </div>
                                <div class="item-body-tr" >
                                    <span class="item-head-td">电堆3电压过低</span>
                                    <span class="item-head-td"><span :class="valveState[4]?'is_red':''"></span></span>
                                </div>
                            </vue-scroll>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                systemStatus: 0,
                flowValue: 0,
                flowValue1: 0,
                flowNum: 0,
                speedNum: 0,
                settingNum: 0,
                value: 68,
                valveState: {},
            }
        },
        methods: {
            getData() {
                this.$api.queryTempquery(
                    [
                        {
                            target: 'h2-01',
                            address: [
                                16442,
                                16443,
                                16444,
                                16442,
                                16443,
                                16444,
                                16445,
                                16442,
                                16443,
                                16444,
                                16445,
                                16442,
                                16443,
                                16445,
                                16442,
                                16443,
                                16444,
                                16445,
                                16442,
                                16443,
                                16444,
                                16445,
                                1,
                                2,
                                3,
                                4,
                                5,
                                6,
                                7,
                                1,
                                2,
                                3,
                                4,
                                5,
                                6,
                                7,
                                1,
                                2,
                                3,
                                4,
                                5,
                                6,
                                7,
                                1,
                                2,
                                3,
                                4,
                                27,
                                28,
                                29,
                                1000,
                                1001,
                                1002,
                                1003,
                                1000,
                                1001,
                                1002,
                                1001,
                                1001,
                                1001,
                            ],
                        },
                        {
                            target: 'virtual',
                            address: [
                                11161,
                                11162,
                                11161,
                                11162,
                                11163,
                                11161,
                                11162,
                                11163,
                            ],
                        }
                    ]
                ).then(( res )=> {
                    var obj = {};

                    for( var j=0; j<res.length; j++ ) {
                        var data = res[j].result || [];

                        for( var i=0; i<data.length; i++ ) {
                            obj[ data[i].address ] = data[i].value;
                        }
                    }

                    /*6*/
                    this.systemStatus = obj[ 29 ];

                    /*9*/
                    this.flowValue = obj[ 11161 ] || 0;

                    /*12*/
                    this.flowValue1 = obj[ 11162 ] || 0;

                    /*15*/
                    this.flowNum = obj[ 11161 ] || 0;

                    /*16*/
                    this.speedNum = obj[ 11162 ] || 0;

                    /*17*/
                    this.settingNum = obj[ 11163 ] || 0;

                    this.valveState = obj;
                    console.log("res==>",obj)
                })
            },

            /**
             * 获取折线图数据
             */
            getLineChartData() {
                var startDate = this.formatDate( 'YYYY-mm-dd', new Date() ) + ' 00:00:00';
                var endDate = this.formatDate( 'YYYY-mm-dd HH:MM:SS', new Date() );

                var api1 = this.$api.queryCharts(
                    {
                        Name: 'h2-01_pv_power',
                        selector: 'MEAN',
                        begin: startDate,
                        end: endDate,
                        groupBlock: '15m',
                    }
                );

                var api2 = this.$api.queryCharts(
                    {
                        Name: 'h2-01_utility_power',
                        selector: 'MEAN',
                        begin: startDate,
                        end: endDate,
                        groupBlock: '15m',
                    }
                );

                var api3 = this.$api.queryCharts(
                    {
                        Name: 'h2-01_pv_power',
                        selector: 'MEAN',
                        begin: startDate,
                        end: endDate,
                        groupBlock: '15m',
                    }
                );


                var api4 = this.$api.queryCharts(
                    {
                        Name: 'h2-01_utility_power',
                        selector: 'MEAN',
                        begin: startDate,
                        end: endDate,
                        groupBlock: '15m',
                    }
                );

                Promise.all( [api1,api2,api3,api4] ).then(( res )=> {
                    console.log('res==>',res);
                    var names = [];
                    var value = [[],[],[],[],];

                    for( var i=0; i<res.length; i++ ) {

                        for( var j=0; j<res[i].data.length; j++ ) {
                            if( i===0 ) {
                                names.push( this.formatDate( 'HH:MM', new Date( res[i].data[j][0] ) ) );
                            }

                            value[i].push( parseInt( res[i].data[j][1] ) )
                        }
                    }

                    this.chartLoad(
                        {
                            names: names,
                            value: [
                                value[0],
                                value[1],
                            ],
                            id: 'flowChart1',
                            legend: ['电堆输出电压（V）', '电堆输出功率（kW）', ],
                        }
                    );


                    this.chartLoad(
                        {
                            names: names,
                            value: [
                                value[2],
                                value[3],
                            ],
                            id: 'flowChart2',
                            legend: ['氢气流量（L/min）', '氮气流量（L/min）', ],
                        }
                    );

                })
            },

            chartLoad( obj ) {
                var _this = this;
                var chart = this.$echarts.init( this.$refs[ obj.id ] );

                var option = {
                    grid: {
                        top: '20%',
                        right: '7%',
                        bottom: '7%',
                        left: '6%',
                        containLabel: true,
                    },
                    tooltip: {
                        trigger: 'axis',
                        // formatter: '{b}:{c}',
                    },
                    legend: {
                        show: 'true',
                        data: obj.legend,
                        right: '7%',
                        top: '7%',
                        icon: 'circle',
                    },
                    color: ['#2C50EE','#35C759'],
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            axisLabel: {
                                formatter: '{value}',
                                fontSize: 14,
                                margin: 13,
                                textStyle: {
                                    color: '#9A9FAF',
                                },
                            },
                            axisLine: {
                                show: false,
                            },
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    color: '#243753',
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                            data: obj.names,
                        },
                    ],
                    yAxis: [
                        {
                            boundaryGap: false,
                            type: 'value',
                            axisLabel: {
                                fontSize: 14,
                                margin: 13,
                                textStyle: {
                                    color: '#9A9FAF',
                                },
                            },
                            splitLine: {
                                lineStyle: {
                                    color: '#e3e3e3',
                                    type: 'dotted',
                                },
                            },
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: '#283352',
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                        },
                        {
                            boundaryGap: false,
                            type: 'value',
                            axisLabel: {
                                fontSize: 14,
                                margin: 13,
                                textStyle: {
                                    color: '#9A9FAF',
                                },
                            },
                            splitLine: {
                                lineStyle: {
                                    color: '#e3e3e3',
                                    type: 'dotted',
                                },
                            },
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: '#283352',
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                        },
                    ],
                    series: [
                        {
                            name: obj.legend[0],
                            type: 'line',
                            smooth: true,
                            showSymbol: false,
                            lineStyle: {
                                normal: {
                                    width: 1.5,
                                    color: '#2C50EE',
                                },
                            },
                            areaStyle: {
                                normal: {
                                    color: new _this.$echarts.graphic.LinearGradient( 0, 0, 0, 1,
                                        [
                                            {
                                                offset: 0,
                                                color: 'rgba(44,80,238,0.1)',
                                            },
                                            {
                                                offset: 0.8,
                                                color: 'rgba(44,80,238,0)',
                                            },
                                        ],
                                        false
                                    ),
                                },
                            },
                            data: obj.value[0],
                        },
                        {
                            name: obj.legend[1],
                            type: 'line',
                            smooth: true,
                            yAxisIndex: 1,
                            showSymbol: false,
                            lineStyle: {
                                normal: {
                                    width: 1.5,
                                    color: '#35C759',
                                },
                            },
                            areaStyle: {
                                normal: {
                                    color: new _this.$echarts.graphic.LinearGradient( 0, 0, 0, 1,
                                        [
                                            {
                                                offset: 0,
                                                color: 'rgba(53,199,89,0.1)',
                                            },
                                            {
                                                offset: 0.8,
                                                color: 'rgba(53,199,89,0)',
                                            },
                                        ],
                                        false
                                    ),
                                },
                            },
                            data: obj.value[1],
                        },
                    ],
                };

                chart.setOption( option );
            },
        },
        mounted() {
            this.getData();
            this.getLineChartData();
        }
    }
</script>

<style lang="less">
    .rldc_wrap {
        width: 100%;
        height: 100%;
        position: relative;

        >.page-content {
            width: 100%;
            /*height: 1759px;*/
            padding-bottom: 28px;

            >.top-panel {
                height: 260px;
                width: 100%;
                margin-bottom: 28px;
                padding-top: 12px;

                .el-input {
                    width: 60px;
                    height: 40px;
                    margin: 0 5px;
                    vertical-align: top;

                    .el-input__inner {
                        height: 40px;
                        line-height: 40px;
                        background: #F9FAFE;
                        border-radius: 4px;
                        border: 1px solid #EEEFF2;
                        text-align: center;
                        font-size: 17px;
                        font-weight: 600;
                        color: #333333;
                    }
                }

                >.panel-item {
                    display: inline-block;
                    vertical-align: top;
                    height: 100%;
                    background: #FFFFFF;
                    border-radius: 8px;
                    margin-right: 28px;
                    padding: 40px;
                    box-sizing: border-box;

                    &:nth-of-type( 1 ) {
                        width: 230px;
                        padding-right: 15px;

                        .panel-content {
                            margin-top: 18px;
                        }

                        .row-item {
                            line-height: 40px;
                            font-size: 16px;
                            color: #333333;
                            margin-bottom: 10px;

                            >span {
                                display: inline-block;
                                vertical-align: middle;

                                &:nth-of-type( 2 ) {
                                    font-size: 20px;
                                    font-weight: 600;
                                    margin-left: 5px;
                                    margin-right: 5px;
                                }
                            }
                        }
                    }

                    &:nth-of-type( 2 ) {
                        width: 280px;

                        .row-item {
                            margin-top: 13px;
                            line-height: 40px;
                            font-size: 16px;
                            color: #333333;

                            >.row-item-label {
                                display: inline-block;
                                vertical-align: top;
                                margin-right: 25px;
                            }

                            >.hy_btn {
                                width: 110px;
                            }

                            &:nth-of-type( 3 ) {

                                >.row-item-label {
                                    margin-right: 5px;
                                }
                            }
                        }
                    }

                    &:nth-of-type( 3 ), &:nth-of-type( 4 ) {
                        width: 260px;

                        >.panel-content {
                            text-align: center;

                            >div {
                                margin-top: 13px;

                                .hy_btn {
                                    width: 110px;
                                }

                                .item-text {
                                    font-size: 16px;
                                    color: #333333;
                                    line-height: 40px;
                                    display: inline-block;
                                    vertical-align: top;
                                }

                                &:last-child {
                                    margin-top: 17px;
                                }

                            }
                        }
                    }

                    &:nth-of-type( 4 ) {
                        width: 260px;
                    }

                    &:nth-of-type( 5 ) {
                        width: calc( 100% - 230px - 280px - 260px - 260px - 112px );
                        margin-right: 0;
                        padding-right: 23px;

                        >.panel-content {
                            width: 100%;
                            height: 160px;
                            margin-top: 5px;

                            >.box-item {
                                display: inline-block;
                                width: 191px;
                                height: 100%;
                                vertical-align: top;

                                >.item-row {
                                    font-size: 16px;
                                    color: #333333;
                                    line-height: 40px;
                                    margin-top: 21px;
                                    margin-bottom: 30px;

                                    .hy_btn {
                                        margin-left: 4px;
                                        width: 110px;
                                    }
                                }

                                &:last-child {
                                    width: calc( 100% - 191px );
                                    border-left: 1px solid #EEEFF2;
                                    box-sizing: border-box;
                                    padding-left: 18px;

                                    >.item-row {
                                        margin-bottom: 20px;
                                        margin-top: 0px;

                                        .item-value {
                                            margin: 0 15px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }

            >.middle-panel {
                height: 842px;
                width: 100%;
                margin-bottom: 28px;

                >.left-panel {
                    display: inline-block;
                    vertical-align: top;
                    width: 826px;
                    height: 100%;
                    margin-right: 28px;

                    >.panel-row {
                        height: 220px;
                        width: 100%;
                        margin-bottom: 28px;

                        >.row-item {
                            display: inline-block;
                            vertical-align: top;
                            width: 380px;
                            height: 100%;
                            background: #FFFFFF;
                            border-radius: 8px;
                            margin-right: 28px;
                            padding: 40px;
                            box-sizing: border-box;

                            >.row-item-content {
                                margin-top: 45px;

                                >.item-card {
                                    display: inline-block;
                                    vertical-align: top;
                                    font-size: 16px;
                                    color: #535763;
                                    margin-right: 30px;

                                    .item-card-num {
                                        font-size: 20px;
                                        font-weight: 600;
                                        color: #333333;
                                        margin-bottom: 10px;

                                        .item-card-unit {
                                            font-weight: normal;
                                            font-size: 16px;
                                            margin-left: 3px;
                                        }
                                    }

                                    &:last-child {
                                        margin-right: 0;
                                    }
                                }
                            }

                            &:last-child {
                                margin-right: 0;
                                width: calc( 100% - 380px - 28px );

                                >.row-item-content {
                                    margin-top: 32px;

                                    >.item-card {
                                        width: 48%;
                                        margin-right: 0;
                                        margin-bottom: 10px;

                                        >.item-card-label {
                                            display: inline-block;
                                            min-width: 60px;
                                        }

                                        >.item-card-num {
                                            display: inline-block;
                                        }
                                    }
                                }

                            }
                        }

                        &:last-child {
                            margin-bottom: 0;
                            height: calc( 100% - 220px - 28px );
                            background: #FFFFFF;
                            border-radius: 8px;
                            padding: 40px;
                            box-sizing: border-box;

                            >.stats-box {
                                width: 100%;
                                height: 80px;
                                border-bottom: 1px solid #EEEFF2;
                                box-sizing: border-box;
                                display: flex;
                                justify-content: space-between;

                                >.stats-item {
                                    display: inline-block;
                                    vertical-align: top;

                                    .stats-item-num {
                                        font-size: 20px;
                                        font-weight: 600;
                                        color: #333333;
                                        margin-bottom: 10px;

                                        >span {
                                            font-weight: normal;
                                            font-size: 16px;
                                            margin-left: 3px;
                                        }
                                    }

                                    .stats-item-label {
                                        font-size: 16px;
                                        color: #333333;
                                    }
                                }
                            }

                            >.flow-box {
                                width: 100%;
                                height: calc( 100% - 80px );
                                background-image: url("../../assets/images/rldc/img_flow.png");
                                background-repeat: no-repeat;
                                background-position: center 49px;
                                position: relative;

                                .flow-text {
                                    position: absolute;

                                    .flow-text-num {
                                        font-size: 20px;
                                        font-weight: 600;
                                        color: #333333;
                                        margin-bottom: 6px;

                                        >span {
                                            font-weight: normal;
                                            font-size: 16px;
                                            margin-left: 3px;
                                        }
                                    }

                                    .flow-text-label {
                                        font-size: 16px;
                                        color: #333333;
                                    }

                                    &:nth-of-type( 1 ) {
                                        top: 76px;
                                    }

                                    &:nth-of-type( 2 ) {
                                        top: 156px;
                                    }

                                    &:nth-of-type( 3 ) {
                                        top: 207px;
                                    }

                                    &:nth-of-type( 4 ) {
                                        top: 291px;
                                    }

                                    &:nth-of-type( 5 ) {
                                        top: 371px;
                                    }
                                }

                                .flow-value {
                                    color: #333333;
                                    font-size: 14px;
                                    position: absolute;
                                    padding: 3px 7px;
                                    box-sizing: border-box;
                                    min-width: 145px;
                                    line-height: 20px;
                                    background-color: rgba(249, 250, 254, 0.8);
                                    border-radius: 4px;
                                    border: 1px solid #dddddd;
                                    text-align: center;

                                    &:after {
                                        content: ' ';
                                        position: absolute;
                                        bottom: -8px;
                                        left: 0;
                                        right: 0;
                                        margin: auto;
                                        width: 0;
                                        height: 0;
                                        border-left: 5px solid transparent;
                                        border-right: 5px solid transparent;
                                        border-top: 8px solid #F9FAFE;
                                    }

                                    &:before {
                                        content: ' ';
                                        position: absolute;
                                        bottom: -10px;
                                        left: 0;
                                        right: 0;
                                        margin: auto;
                                        width: 0;
                                        height: 0;
                                        border-left: 6px solid transparent;
                                        border-right: 6px solid transparent;
                                        border-top: 10px solid #dddddd;
                                    }

                                    &:nth-of-type( 1 ) {
                                        top: 52px;
                                        left: 236px;
                                    }

                                    &:nth-of-type( 2 ) {
                                        top: 119px;
                                        left: 236px;
                                    }

                                    &:nth-of-type( 3 ) {
                                        top: 183px;
                                        left: 236px;
                                    }

                                    &:nth-of-type( 4 ) {
                                        top: 251px;
                                        left: 236px;
                                    }

                                    &:nth-of-type( 5 ) {
                                        top: 324px;
                                        left: 236px;
                                    }

                                }
                            }
                        }
                    }
                }

                >.right-panel {
                    display: inline-block;
                    vertical-align: top;
                    width: calc( 100% - 826px - 28px );
                    height: 100%;

                    >.panel-row {
                        height: 407px;
                        background: #FFFFFF;
                        border-radius: 8px;
                        width: 100%;
                        margin-bottom: 28px;

                        >.chart-box {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }

            >.bottom-panel {
                height: 602px;
                width: 100%;
                background: #FFFFFF;
                border-radius: 8px;
                padding: 40px;
                box-sizing: border-box;

                >.panel-content {
                    width: 100%;
                    height: calc( 100% - 28px - 20px );
                    margin-top: 20px;
                    border-radius: 8px;
                    border: 1px solid #CFD1D8;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: space-between;

                    >.content-item {
                        height: 100%;
                        width: 461px;

                        >.item-head {
                            height: 48px;
                            line-height: 47px;
                            border-bottom: 1px solid #EEEFF2;
                            border-right: 1px solid #EEEFF2;
                            border-left: 1px solid #EEEFF2;
                            display: flex;
                            box-sizing: border-box;

                            >span {
                                font-size: 16px;
                                font-weight: 600;
                                color: #0E1526;
                                text-align: center;
                                flex: 1;

                                &:nth-of-type(1) {
                                    flex: 1.3;
                                    text-align: left;
                                    padding-left: 40px;
                                    box-sizing: border-box;
                                    border-right: 1px solid #EEEFF2;
                                }
                            }
                        }

                        >.item-body {
                            width: 100%;
                            height: calc( 100% - 48px );

                            .item-body-tr {
                                height: 48px;
                                line-height: 47px;
                                border-bottom: 1px solid #EEEFF2;
                                border-right: 1px solid #EEEFF2;
                                border-left: 1px solid #EEEFF2;
                                display: flex;
                                box-sizing: border-box;

                                >span {
                                    font-size: 14px;
                                    color: #0E1526;
                                    text-align: center;
                                    flex: 1;

                                    &:nth-of-type(1) {
                                        flex: 1.3;
                                        text-align: left;
                                        padding-left: 40px;
                                        box-sizing: border-box;
                                        border-right: 1px solid #EEEFF2;
                                    }

                                    &:nth-of-type( 2 ) {

                                        >span {
                                            width: 16px;
                                            height: 16px;
                                            background: #CFD1D8;
                                            display: inline-block;
                                            border-radius: 50%;
                                            position: relative;
                                            top: 3px;

                                            &.is_red {
                                                background-color: #FF3B30;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>
